<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Field Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Clear canvas
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Define parameters
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;
        const pathY = centerY;
        const regionWidth = 160;
        const regionHeight = 200;
        const regionX = centerX - regionWidth / 2;
        const regionY = centerY - regionHeight / 2;

        // Draw the shaded region
        ctx.fillStyle = '#d9d9d9'; // Light grey
        ctx.fillRect(regionX, regionY, regionWidth, regionHeight);

        // Draw the path of the electron
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.beginPath();
        ctx.moveTo(50, pathY);
        ctx.lineTo(550, pathY);
        ctx.stroke();

        // Helper function to draw arrowheads
        function drawArrowhead(x, y, size) {
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(x - size, y - size * 0.6);
            ctx.moveTo(x, y);
            ctx.lineTo(x - size, y + size * 0.6);
            ctx.stroke();
        }

        // Draw arrowheads on the path
        const arrowSize = 10;
        drawArrowhead(180, pathY, arrowSize);
        drawArrowhead(300, pathY, arrowSize);
        drawArrowhead(420, pathY, arrowSize);

        // Draw labels
        ctx.fillStyle = 'black';
        ctx.font = '20px sans-serif';
        ctx.textAlign = 'start';
        
        // "path of electron" label
        ctx.fillText('path of', 60, pathY - 12);
        ctx.fillText('electron', 60, pathY + 12);

        // "region of..." label
        const labelX = regionX + regionWidth + 20;
        const labelY = regionY - 10;
        ctx.fillText('region of', labelX, labelY + 20);
        ctx.fillText('uniform electric', labelX, labelY + 45);
        ctx.fillText('and magnetic fields', labelX, labelY + 70);

        // Leader line for the region label
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(labelX - 10, labelY + 45); // Start near the text
        ctx.lineTo(centerX + 20, pathY - 30); // End inside the region
        ctx.stroke();

        // "Fig. 9.2" caption
        ctx.font = 'bold 20px sans-serif';
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 9.2', centerX, canvas.height - 30);

    </script>
</body>
</html>